<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="header" style=" position: fixed,top:0">
			<!-- 定位城市 -->
			<view class="addr"   @tap="showModal" >
				<view class="cuIcon-locationfill text-red"></view>
				{{city.name}}
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<input placeholder="默认关键字" confirm-type="search" @confirm="serach" v-model="queryParams.query" placeholder-style="color:#c0c0c0;" />
				<view class="icon search"></view>
			</view>

		</view>

		<sl-filter :ref="'slFilter'" :topFixed="true" :isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor"
		 :menuList="menuList" @result="result"></sl-filter>
		<view class="list">
			<navigator v-for="(bulding,index) in expertList" :key="bulding.id" :url="'/pages/new/detail/detail?id='+bulding.id" >
				<bulding-item :options="bulding"></bulding-item>
			</navigator>

		</view>

		<view class="cu-load load-modal" v-if="isLoading">
			<view class="cuIcon-emojifill text-orange"></view>
			<view class="gray-text">{{loadMoreDefalutText}}</view>
		</view>
	
		
		<uni-drawer :visible="showLeft" mode="left"   @close="closeDrawer">
			
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
				<view class="cu-item arrow" v-for="(item,index) in citys" :key="index">
					<button @tap="tabSelect" :data-city="item" class="content">
						<text class="text-grey">{{item.name}}</text>
					</button>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg" @tap="hideModal">关闭</button>
			</view>
		</uni-drawer>
		<view class="cu-load" v-if="expertList.length==0">
			<view class="text-gray">——————暂无数据——————</view>
		</view>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import buldingItem from '@/pages/new/item.vue';
	import commentItem from '@/pages/comment/item.vue';
	import uniDrawer from '@/components/uni-drawer.vue'

	export default {
		components: {
			slFilter,
			buldingItem,
			commentItem,
			uniDrawer
		},
		data() {
			return {
				imgRoot:this.$rootUrl,
				isLoading: false,
				showLeft: false,
				loadMoreText: '加载中...',
				loadMoreDefalutText: '努力加载中...',
				loadMoreNoLeftText: '没有更多了,请掉头行驶...',
				connectionFailText: '连接失败,请检查网络是否断开!',
				emptyText: '什么都没找到哟...',
				expertList: [],
				city: '',
				citys:[],
				isBuildingLeft: true,
				orderByName: false,
				queryParams: {
					query: '',
					channel: 'new',
					Area:'',
					HouseType:'',
					HousePrice:'',
					CityId:null,
					pageSize: 10,
					Hot:true,
					page: 1,
				},
				themeColor: '#D1372C',
				titleColor: '#666666',
				filterResult: '',
				buldings: [],
				menuList: [{
						'title': '区域',
						'key': 'Area',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '区域',
								'value': ''
							}
						]
					},
					{
						'title': '价格',
						'key': 'HousePrice',
						'isSort': false,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]
					},
					{
						'title': '业态',
						'key': 'HouseType',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '业态',
								'value': ''
							}
						]
					}
				]

			}
		},
		onLoad() {
			var me = this;
			me.citys=getApp().globalData.citys;
			if(this.city.id!=getApp().globalData.city.id)
			{
				this.city=getApp().globalData.city;
				this.queryParams.CityId=this.city.id;
			}
			me.loadBuildingList();
			me.loadSelectList();
		},
		onShow(){
			if(this.city.id!=getApp().globalData.city.id)
			{
				this.city=getApp().globalData.city;
				this.queryParams.CityId=this.city.id;
				this.expertList=[],
				this.queryParams.page=1;
				this.isBuildingLeft=true;
				this.loadSelectList();
				this.loadBuildingList();
			}
			
		},
		onShareAppMessage(){
			return {
			      title: '选楼盘，查佣金，看房价'
			    }
		},
		onPullDownRefresh() {
			this.refreshExpertList();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.loadBuildingList();
		},
		methods: {
			closeDrawer(e) {
				this.showLeft = false
			},
			showModal(e) {
				this.showLeft = true;
			},
			hideModal() {
				this.showLeft = false;
			},
			tabSelect(e) {
				var selectCity=e.currentTarget.dataset.city;
				if(this.city.id!=selectCity.id)
				{
					getApp().globalData.city=selectCity;
					this.city=selectCity;
					this.queryParams.CityId=selectCity.id;
					this.expertList=[],
					this.queryParams.page=1;
					this.isBuildingLeft=true;
					this.loadSelectList();
					this.loadBuildingList();
				}
				this.showLeft=false;
			},
			result(val) {
				
				this.queryParams.HousePrice=val.HousePrice;
				this.queryParams.HouseType=val.HouseType;
				this.queryParams.Area=val.Area;
				this.expertList=[],
				this.queryParams.page=1;
				this.isBuildingLeft=true;
				this.loadBuildingList();
			},
			serach(){
				this.expertList=[],
				this.queryParams.page=1;
				this.isBuildingLeft=true;
				this.loadBuildingList();
			},
			// 重置所有选项，包括默认选项，并更新result
			resetAllSelect() {
				this.$refs.slFilter.resetAllSelect(function(result) {
					console.log('重置之后回调的result:' + JSON.stringify(result))
				})
			},
			// 重置选项为设置的默认值，并更新result
			resetSelectToDefault() {
				this.$refs.slFilter.resetSelectToDefault(function(result) {
					console.log('重置为默认值之后回调的result:' + JSON.stringify(result))
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/new/detail/detail'
				})
			},
			loadBuildingList() {
				var me = this;

				if (!me.isBuildingLeft) {
					uni.showModal({
						content: '已经到底了!',
						showCancel: false
					});
					return;
				}
				this.isLoading = true;
				uni.request({
					url: me.$rootUrl + '/House/GetList',
					data: me.queryParams,
					method: 'GET',
					success(res) {
						me.isLoading = false;
						if (res.data.success) {
							res.data.items.forEach(n => me.expertList.push(n));

							if (me.expertList.length >= res.data.total) {
								me.isBuildingLeft = false;
								me.loadMoreText = me.loadMoreNoLeftText;
							} else {
								me.queryParams.page++;
							}
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			loadSelectList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/Dic/GetNewDicList',
					data: {
						cityId:this.city.id
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.menuList[0].detailList=res.data.areas;
							me.menuList[1].detailList=res.data.prices;
							me.menuList[2].detailList=res.data.type;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			
			},
			refreshExpertList() {
				this.expertList = [];
				this.loadMoreText = this.loadMoreDefalutText;
				this.isExpertLeft = true;
				this.queryParams.page = 1;
				this.loadExpertList();
			},
		}
	}
</script>

<style lang="scss">
	.content {

		.header {
			width: 100%;
			padding: 0 4%;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			/* #ifdef H5 */

			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			z-index: 10;
			background-color: #fff;

			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */

			.addr {
				width: 150upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 28upx;

				.icon {
					height: 60upx;
					margin-right: 5upx;
					display: flex;
					align-items: center;
					font-size: 42upx;
					color: #ffc50a;
				}
			}

			.input-box {
				width: 100%;
				height: 60upx;
				background-color: #f5f5f5;
				border-radius: 30upx;
				position: relative;
				display: flex;
				align-items: center;

				.icon {
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					width: 60upx;
					height: 60upx;
					font-size: 34upx;
					color: #c0c0c0;
				}

				input {
					padding-left: 28upx;
					height: 28upx;
					font-size: 28upx;
				}
			}

			.icon-btn {
				width: 120upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;

				.icon {
					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 42upx;
				}
			}
		}

		.list {
			margin-top: 48px;

		}
	}

	.text {
		margin-top: 50px;
		margin-left: 20px;
		width: 100%;
	}
</style>
